<template>
  <van-tabbar
    v-model="active"
    class="com-tabbar"
    :border="false"
    active-color="rgb(98, 247, 146)"
    inactive-color="rgb(204, 204, 204)"
  >
    <van-tabbar-item
      v-for="(item, index) in barList"
      :key="index"
      replace
      :to="item.to"
      :name="item.name"
      icon="<img src='home.svg'>"
    >
      <span>{{ t(item.name) }}</span>
      <template #icon="props">
          <svg v-if="props.active"  aria-hidden="true" class="icon svg-icon">
            <use
             :xlink:href="item.active">
            </use>
          </svg>
          <svg v-else  aria-hidden="true" class="icon svg-icon">
            <use
             :xlink:href="item.inactive">
            </use>
          </svg>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts" setup>
import { ref,watch } from "vue";
import { useRoute } from "vue-router";
import { t } from '@/languages'
const route = useRoute()
const active = ref("home");

watch(
  () => route,
  () => {
    active.value = route.name;
  },
  { deep: true ,immediate:true}
);



const barList = [
  {
    name: "Home",
    active: "#icon-home-active",
    inactive: "#icon-home",
    to: "/",
  },
  {
    name: "Market",
    active: "#icon-market-active",
    inactive: "#icon-market",
    to: "/market",
  },
  {
    name: "Holdings",
    active: "#icon-holding-active",
    inactive: "#icon-holding",
    to: "/holdings/index",
  },
  {
    name: "My Choice",
    active: "#icon-collect-active",
    inactive: "#icon-collect",
    to: "/myChoice/index",
  },
  {
    name: "Mine",
    active: "#icon-profile-active",
    inactive: "#icon-profile",
    to: "/mine/index",
  },
];
</script>
<style lang="scss">
.com-tabbar {
  height: 60px;
  background-color: #162333;

  .van-tabbar-item__text {
    font-size: 12px;
  }

  .van-tabbar-item--active {
    background-color: #162333;
  }
}
.icon{
  width: .64rem;
    height: .64rem;
    fill: currentColor;
    overflow: hidden;
}
</style>
